<template>
  <a-layout-sider  
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
    width="208px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null">
    <div class="side-header">      
      <a-select v-model="titleKey" @change="handleChange" :dropdownMatchSelectWidth="false" :class="{'hidden': collapsed}" v-if="titleList && titleList.length > 1">
        <a-select-option  v-for="item in titleList" :key="item.value">
          {{item.title}}
        </a-select-option>
      </a-select>
      <span :class="{'hidden': collapsed}" v-else>{{titleName}}</span>
      <a-icon        
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="toggle"/>
    </div>
    <div class="side-search">
      <a-input-search placeholder="请输入报表名称搜索" v-model="searchValue" @search="onSearch" @change="onSearch" :allowClear="true" v-if="!collapsed"/>
    </div>
    <s-menu
      :collapsed="collapsed"
      :menu="menus"
      :theme="theme"
      @select="onSelect"
      :mode="mode"
      :style="smenuStyle">
    </s-menu>
  </a-layout-sider>

</template>

<script>
  import ALayoutSider from "ant-design-vue/es/layout/Sider"
  import SMenu from '@/components/menuHte/index'
  import { mixin, mixinDevice } from '@/utils/mixin.js'
  import { simpleDebounce } from '@/utils/util'

  export default {
    name: "SideMenu",
    components: { ALayoutSider, SMenu },
    mixins: [mixin, mixinDevice],
    props: {
      mode: {
        type: String,
        required: false,
        default: 'inline'
      },
      theme: {
        type: String,
        required: false,
        default: 'dark'
      },
      collapsible: {
        type: Boolean,
        required: false,
        default: false
      },
      collapsed: {
        type: Boolean,
        required: false,
        default: false
      },
      menus: {
        type: Array,
        required: true
      },
      titleList:{
        type: Array,
        required: true,
        default: []
      },
      titleType:{
        type: String,
        required: false,
        default: ''
      }
    },
    data() {
      return{
        searchValue: '',
        titleName: '',
        titleKey: this.titleType,
      }
    },
    created() {
      const obj = this.titleList.find(item=>{
        return item.value === this.titleType
      })
      this.titleName = obj.title
    },
    computed:{      
      smenuStyle() {
        let style = { 'padding': '0' }
        if (this.fixSiderbar) {
          style['height'] = 'calc(100% - 59px)'
          style['overflow'] = 'auto'
          style['overflow-x'] = 'hidden'
        }
        return style
      }
    },
    methods: {
      onSelect (obj) {
        this.$emit('menuSelect', obj)
      },
      toggle() {
        this.$emit('toggle')
      },
      handleChange(value){
        this.$emit('handleChange', value)
      },
      onSearch: simpleDebounce(function() {
        this.$emit('onSearch', this.searchValue.trim())
      }, 300),
    }
  }
</script>
<style lang="less" scoped>
  @bg: #4f81c4;
  .sider {
    @scrollBarSize: 10px;    
    ul.ant-menu {background-color: @bg;
      &::-webkit-scrollbar {
        width: @scrollBarSize;
        height: @scrollBarSize;
        background-color: transparent;
        display: none;
      }
      & .-o-scrollbar {
        display: none;
      }
      &::-webkit-scrollbar-track {
        background-color: transparent;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: @scrollBarSize;
        background-color: #eee;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        &:hover {
          background-color: #dddddd;
        }
        &:active {
          background-color: #bbbbbb;
        }
      }
    }
  }
  /deep/ .ant-menu{
    .ant-menu-submenu>.ant-menu{
      background-color: @bg;
    }
    .ant-menu-item.ant-menu-item-selected > a, .ant-menu-item:hover >a,
    .ant-menu-item:hover, .ant-menu-item-active, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, 
    .ant-menu-submenu-active, .ant-menu-submenu-title:hover, .ant-menu-submenu.ant-menu-submenu-selected{color: #fff;}
    
    .ant-menu-submenu-selected{
      .ant-menu-submenu-title{
        .ant-menu-submenu-arrow::before,.ant-menu-submenu-arrow::after{
          background: linear-gradient(to right, #fff, #fff) !important;
        }

      }
    }
    .ant-menu-submenu-inline{
      > .ant-menu-submenu-title{
        &:hover.ant-menu-submenu-arrow, .ant-menu-submenu-arrow{
          &:after, &:before{
            background: linear-gradient(to right, #c4d9f5, #c4d9f5);
          }
        }
      }
    }
    .ant-menu-item > a,.ant-menu-submenu{color: #c4d9f5;display: inline;}
    &:not(.ant-menu-horizontal) .ant-menu-item-selected{background-color: #3168b1;}
    &.ant-menu-inline .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after{border-right: none;}
  }
  /deep/ .ant-menu.ant-menu-root {
    & > .ant-menu-item:first-child {
      & > a{color: #fff;
        &:hover{color: #fff !important;}
      }
      &:not(.ant-menu-item-selected) {
        background-color: transparent;
        & > a{color: #c4d9f5;}
      }
    }
  }
  /deep/ .ant-menu-inline-collapsed {
    > .ant-menu-item,
    > .ant-menu-submenu > .ant-menu-submenu-title{text-align: center;padding: 0 !important;}
  }
  .side-header{
    padding: 11px 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/ .ant-select{transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);      
      .ant-select-selection{
        background-color: @bg;border: 1px solid @bg;color: #fff;box-shadow:none;font-size: 20px;font-weight: bold;
        .ant-select-selection__rendered{margin-left: 0}
      }
    }
    /deep/ .ant-select-open .ant-select-selection{border: 1px solid @bg;}
    /deep/ .ant-select-arrow{right: 5px;
      i.anticon {color: #fff;}
    }
    >i,>span{font-size: 20px;}
    >i{position: relative;z-index: 1;color: #c4d9f5;
      &:hover{color: #fff;}
    }
    >span{font-weight: bold;white-space: nowrap;opacity:1;transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      &.hidden{overflow: hidden;}
    }
    .hidden{max-width: 0;opacity: 0;width:0;height: 0;min-width: 0;}
  }
  .side-search{padding: 10px;border-top: 1px solid #a1bfe6;
    /deep/ .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled){border-color: #285795;}
    /deep/ .ant-input{background-color: #285795;border-radius: 2px;border-color: #285795;color: #fff; }
    /deep/ .anticon{color: #fff;}
  }  
</style>
